<!--
- Author:  LiShibin.
- Date:    2017/3/4.
- File:    底部tab.
-->
<template>
  <div class="footer-tab" v-show="show">
    <nav class="nav">
      <ul>
        <li :class="{ 'on': item.name == $route.name || item.name == current}" v-for="item in list">
          <a href="javascript:void(0)" @click="go(item.name)">
            <i class="iconfont" :class="[ item.icon ]" v-show="item.name != $route.name && item.name != current"></i>
            <i class="iconfont" :class="[ item.icon2 ]" v-show="item.name == $route.name || item.name == current"></i>
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        list: [
          {
            title: '首页',
            name: 'home',
            icon: 'icon-home',
            icon2: 'icon-homeon'
          },
          {
            title: '买表',
            name: 'goods-classify',
            icon: 'icon-maibiao_weixuanzhong3',
            icon2: 'icon-maibiao_weixuanzhong3on'
          },
          {
            title: '发现',
            // name: 'video-list',
            name: 'goods-list',
            icon: 'icon-faxian_weixuanzhong1',
            icon2: 'icon-faxian_weixuanzhong1on'
          },
          {
            title: '客服',
            name: 'login-service',
            icon: 'icon-kefu1',
            icon2: 'icon-kefu1on'
          },
          {
            title: '我的',
            name: 'my',
            icon: 'icon-my',
            icon2: 'icon-myon'
          }
        ]
      }
    },
    props: {
      current: {
        type: String,
        default: function () {
          return ''
        }
      },
      show: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    created() {
    },
    methods: {
      go(routerName) {
        // if (routerName == 'cart-list') {
        //   this.$toast('暂未开通！')
        //   return
        // }
        this.$router.push({name: routerName})
      }
    }
  }
</script>

<style lang="less">
  .footer-tab {
    &-nav {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 49px;
      padding-top: 0.25rem;
      border-top: #d0cfcd solid 1px;
      background: #f8f8f8;
      z-index: 10;
      li {
        position: relative;
        float: left;
        width: 20%;
        text-align: center;
        color: #898989;
        .icon-shipin1, .icon-shipin3 {
          font-size: 22px;
          line-height: 23px;
        }
        i {
          display: block;
          font-size: 20px;
        }
        p {
          font-size: 12px;
          padding-top: 0.05rem;
        }
        a {
          color: inherit;
        }
        .num {
          position: absolute;
          left: 2.125rem;
          top: 0.15rem;
          display: block;
          width: 0.65rem;
          height: 0.65rem;
          line-height: 0.65rem;
          font-size: 0.5rem;
          color: #fff;
          text-align: center;
          background: #e60012;
          border-radius: 50%;
        }
      }
      li.on {
        color: #45a73a;
      }
    }
  }
  .icon-homeon:before { content: "\e616"; }
  .icon-maibiao_weixuanzhong3on:before { content: "\e663"; }
  .icon-faxian_weixuanzhong1on:before { content: "\e65e"; }
  .icon-kefu1on:before{ content: "\e664";}
  /*.icon-maibiao_weixuanzhong2on:before { content: "\e610"; }*/
  .icon-my:before { content: "\e650"; }
  .nav>ul>li i{line-height: 0.9rem !important;}
</style>
